<template>
    <div class="app">
        <div class="loading79">
            <p class="p79">{{ generateRandomCode(3) }}<span
                    class="i79-1">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(1) }}<span
                    class="i79">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(1) }}
            </p>
            <p class="p79">{{ generateRandomCode(3) }}<span
                    class="i79">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(2) }}<span
                    class="i79">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(1) }}</p>
            <p class="p79">{{ generateRandomCode(4) }}<span
                    class="i79-1">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(2) }}<span
                    class="i79">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(1) }}
            </p>
            <p class="p79">{{ generateRandomCode(2) }}<span
                    class="i79-1">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(2) }}</p>
            <p class="p79"><span class="i79">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(4) }}<span
                    class="i79-1">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(1) }}</p>
            <p class="p79">{{ generateRandomCode(3) }}<span
                    class="i79-1">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(2) }}</p>
            <p class="p79">{{ generateRandomCode(1) }}<span
                    class="i79">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(4) }}<span
                    class="i79">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(2) }}</p>
            <p class="p79">{{ generateRandomCode(2) }}<span
                    class="i79-1">{{ generateRandomCode(1) }}</span>{{ generateRandomCode(4) }}</p>
        </div>
    </div>
</template>

<script>
import {generateRandomCode} from "@/utils/generalUtil";

export default {
    name: "loading",
    methods: {generateRandomCode}

}
</script>

<style scoped>

.app {
    display: flex;
}

.loading79 {
    width: 160px;
    height: 88px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 4px;
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

.p79 {
    writing-mode: vertical-rl;
    font-size: 14px;
    line-height: 2;
    margin: 0;
    padding: 0;
    position: absolute;
    color: #b203a9;
    --left: 8px;
    --delay: 0.1s;
    animation: eff79 0.6s linear infinite;
}

.i79 {
    color: #1cec26;
}

.i79-1 {
    color: #158ad3;
}

.p79:nth-child(1) {
    left: var(--left);
}

.p79:nth-child(2) {
    left: calc(var(--left) * 3);
    animation-delay: var(--delay);
}

.p79:nth-child(3) {
    left: calc(var(--left) * 5);
    animation-delay: calc(var(--delay) * 2);
}

.p79:nth-child(4) {
    left: calc(var(--left) * 7);
}

.p79:nth-child(5) {
    left: calc(var(--left) * 9);
}

.p79:nth-child(6) {
    left: calc(var(--left) * 11);
    animation-delay: calc(var(--delay) * 3);
}

.p79:nth-child(7) {
    left: calc(var(--left) * 13);
}

.p79:nth-child(8) {
    left: calc(var(--left) * 15);
    animation-delay: calc(var(--delay) * 4);
}

@keyframes eff79 {
    0% {
        transform: translateY(-40%);
    }
    100% {
        transform: translateY(140%);
    }
}
</style>